import React, { useState,forwardRef,useImperativeHandle } from 'react'

const Child = (props,ref) => {
    const [num,setNum] = useState(0)

    const add = (n) => {
        setNum(prev => prev + n)
    }

    useImperativeHandle(ref, () => {
        return {
            num,
            add
        }
    },[num])

  return (
    <div className='box'>
        <p>num:{num}</p>
        <button onClick={() => add(2)}>+</button>
    </div>
  )
}

export default forwardRef(Child)